<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>中文识别</title>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

		  
		  
	<div id="uploadDiv">
	
	    <el-divider content-position="left">1. 选择语言</el-divider>
	    
			<el-radio-group v-model="language" @change="languageChange">
			    <el-radio label="chi_sim" border>中文</el-radio>
			    <el-radio label="eng" border>英文</el-radio>
			</el-radio-group>
	    
	
	    <el-divider content-position="left">2. 上传图片(图片文字最好是黑体)</el-divider>
			<el-upload
				  action="${base}/ocr/multipart"
				  accept="image/jpeg,image/gif,image/png"
				  list-type="picture-card"
				  :before-upload="onBeforeUpload"
				  :on-preview="handlePictureCardPreview"
				  :on-success="uploadSuccess"
				  name="multipartFile"
				  :data="paramData"
				  >
			     <el-button size="small" type="primary">点击上传</el-button>
			</el-upload>
			
			 <el-dialog :visible.sync="dialogVisible">
			     <img width="100%" :src="dialogImageUrl" alt="">
			 </el-dialog>
			 
			 <br/>
			 
			 
		<el-divider content-position="left">3. 解析内容如下</el-divider>
			 <el-input
				  type="textarea"
				  :autosize="{ minRows: 10, maxRows: 20}"
				  v-model="textContent">
			 </el-input>
			 
			 
	</div>
	
<script type="text/javascript">
	var content = new Vue({
		  el: '#uploadDiv',
		  data: {
		          dialogImageUrl: '',
		          dialogVisible: false,
		          textContent: '',
		          language: 1,
		          paramData:{}
		  },
		  methods: {
			    onBeforeUpload(){
			    	if(null == this.paramData.language ){
			    		this.paramData.language = 'chi_sim';
			    	}
			    },
		  		uploadSuccess(response,file,fileList) {
		  	        console.log(file.response);
		  	        this.textContent=file.response;
		  	    },
	  	        handlePictureCardPreview(file) {
		  	        this.dialogImageUrl = file.url;
		  	        this.dialogVisible = true;
		  	        console.log(file.url);
	  	        },
	  	        languageChange(){
	  	        	this.paramData.language = this.language;
	  	        	console.log(this.language);
	  	        }
		     }
		})
	
	

</script>	
	
	
</body>
</html>